@extends('home.base.person')
@section('content')
<meta charset="utf-8">
<meta name='csrf-token' content="{{ csrf_token() }}">
<title>地址管理</title>

<link href="{{ asset('AmazeUI-2.4.2/assets/css/admin.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('AmazeUI-2.4.2/assets/css/amazeui.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('css/personal.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('css/addstyle.css') }}" rel="stylesheet" type="text/css">

<script src="{{ asset('AmazeUI-2.4.2/assets/js/jquery.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('AmazeUI-2.4.2/assets/js/amazeui.js') }}"></script>
<div class="user-address">
	<!--标题 -->
	<div class="am-cf am-padding">
		<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">地址管理</strong> / <small>Address&nbsp;list</small></div>
	</div>
	<hr/>
	<form  method='post' name='myform'>
		{{ csrf_field() }}
		{{ method_field('DELETE') }}
	</form>
	<ul class="am-avg-sm-1 am-avg-md-3 am-thumbnails">
		@foreach($ob as $v)
		<li class="user-addresslist defaultAddr">
			<p class="new-tit new-p-re">
				<span class="new-txt">{{ $v->consignee }}</span>
				<span class="new-txt-rd2">{{ $v->telephone }}</span>
			</p>
			<div class="new-mu_l2a new-p-re">
				<p class="new-mu_l2cw">
					<span class="title">地址：</span>
					{{ $v->address.$v->detail }}
				</p>
			</div>
			<div class="new-addr-btn">
				<a href="{{ url('home/address').'/'.$v->id.'/edit' }}"><i class="am-icon-edit"></i>编辑</a>
				<span class="new-addr-bar">|</span>
				<a href='javascript:doDel({{ $v->id }})' onclick="delClick(this);"><i class="am-icon-trash"></i>删除</a>
			</div>
		</li>
		@endforeach
	</ul>	
	@if(session('msg'))
	 	<div class='alert alert-block alert-success' style="color:green;">
	 		{{ session('msg') }}
	 		<i class='icon'></i>
	 	</div>
	 @endif	 
	<div class="clear"></div>
	<a class="new-abtn-type" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0}">添加新地址</a>
	<!--例子-->
	@if (count($errors) > 0)
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li style="color:red;">{{ $error }}</li>
            @endforeach
        </ul>
    </div>
	@endif
	<div class="add-dress">
			<!--标题 -->
			<div class="am-cf am-padding">
				<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">新增地址</strong> / <small>Add&nbsp;address</small></div>
			</div>
			<hr/>
			<div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;">
				<form class="am-form am-form-horizontal"  method="post" name="myForm">
					{{ csrf_field() }}
					<!-- {{ method_field('PUT') }} -->
					<div class="am-form-group">
						<label for="user-name" class="am-form-label">收货人</label>
						<div class="am-form-content">
							<input type="text" id="user-name" placeholder="收货人" name = "consignee" required>
						</div>
					</div>
					<div class="am-form-group">
						<label for="user-phone" class="am-form-label">手机号码</label>
						<div class="am-form-content">
							<input id="user-phone" placeholder="手机号必填" type="text" name = "telephone" required>
						</div>
					</div>
					<div class="am-form-group">
						<label for="user-address" class="am-form-label">所在地</label>
						<div class="am-form-content address">
							<!-- <form action="" method='post'> -->
							<select id="address" name="address[]">
								<option value="">--请选择--</option>
								<!-- <option value="b" selected>湖北省</option> -->
							</select>
							<!-- </form> -->
							<span style="display:none; color:red;" id="notice">请选择地区</span>
						</div>
					</div>
					<div class="am-form-group">
						<label for="user-intro" class="am-form-label">详细地址</label>
						<div class="am-form-content">
							<textarea class="" rows="3" id="user-intro" placeholder="输入详细地址" name="detail"></textarea>
							<small>100字以内写出你的详细地址...</small>
						</div>
					</div>
					<div class="am-form-group">
						<div class="am-u-sm-9 am-u-sm-push-3">
							<button class="am-btn am-btn-danger"  onclick="doSubmit()">保存</button>
							<a href="javascript: void(0)" class="am-close am-btn am-btn-danger" data-am-modal-close>取消</a>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<script type="text/javascript" src='{{ asset("js/jquery-1.8.3.min.js") }}'></script>
	<script type="text/javascript">
		$.ajaxSetup({
		    headers: {
		        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		    }
		});
		$.ajax({
			url:"{{ url('home/ajax/get') }}",
			type:'get',
			async:true,
			data:{upid:0},
			dataType:'json',
			success:function(data)
			{				
				//遍历从数据库查出来的数据，生成option选项追加到select里
				for (var i = 0; i < data.length; i++) { 
					$('#address').append("<option value="+data[i].id+">"+data[i].name+"</option>");
				};
			},
			error:function()
			{
				alert('ajax请求失败');
			}
		});

		//给所有的select标签绑定change事件
		$('select').live("change",function(){			
			//干掉当前你选择的select标签后面的select标签
			$(this).nextAll('select').remove();
			//判断你选择是不是--请选择--
			if($(this).val() != '--请选择--'){				
				//因为在ajax的回调函数中需要使用当前对象，但是$(this)在ajax的回调函数中用不了
				var ob = $(this);
				$.ajax({
					url:"{{ url('home/ajax/post') }}",
					type:'post',
					async:true,					
					data:{upid:$(this).val(),'_token':"{{ csrf_token() }}"},
					dataType:'json',
					success:function(data)
					{						
						//判断是不是最后一级城市，最后一级城市查数据库length==0						
						if(data.length>0){							
							//生成一个新的select标签
							var select = $("<select name='address[]'><option>--请选择--</option></select>");
							//遍历从数据库查出来的数据，生成option选项追加到select里
							for (var i = 0; i < data.length; i++) {
								$(select).append("<option value="+data[i].id+">"+data[i].name+"</option>");
							};
							//外部插入到前一个select后面
							ob.after(select);
						}
					},
					error:function()
					{
						alert('ajax请求失败');
					}
				});
			}
		});
	</script>
	<script type="text/javascript">
		function doSubmit(){
			var address = document.getElementById("address").value;			
			if(address != 0){
				var form = document.myForm;
				form.action="{{ url('home/address') }}";
				form.submit();
			}else{
				notice.style.display = 'block';
				alert('请选择地区');
				return false;
			}
		}
	</script>
	<script>
		function doDel(id){
			if(confirm('确定删除吗？')){
				var form = document.myform;
				form.action = '/home/address/'+id;
				form.submit();
			}
		}
	</script>
<div class="clear"></div>				
@endsection